Make useStore compatible with client-side hydration of SSR components#39
Merged
ai merged 1 commit intonanostores:mainfrom Mar 14, 2026
Merged
Make useStore compatible with client-side hydration of SSR components#39ai merged 1 commit intonanostores:mainfrom
useStore compatible with client-side hydration of SSR components#39ai merged 1 commit intonanostores:mainfrom
Conversation
The initial value of a store is now returned by `useStore` on first mount / hydration instead of the store's current value, by providing the `Store#init` value to the third "getServerSnapshot" argument to `useSyncExternalStore`. This change avoids hydration errors on projects that use Server Side Rendering (SSR) combined with client-side navigation and rendering, where the client-side store value can get out of sync with the value in the server-rendered page especially if the server page is cached in any way (ISR). This requires an upcoming release of nanostores including the new `Store#init` attribute from PR: nanostores/nanostores#390 Fixes nanostores#38
Contributor
Author
|
NOTE: Tests are expected to fail for this PR until Also note that this code change was straight-forward, but finding a way to simulate the SSR + hydration behaviour in the tests was a bit of a nightmare. I'm not sure I've got the tests completely right, but they do at least fail due to hydration errors for nanostores 1.1.1 then pass when run against a merge of nanostores/nanostores#390 |
ai
reviewed
Mar 14, 2026
| : store.listen(emit(snapshotRef, onChange)) | ||
| }, deps) | ||
| let get = () => snapshotRef.current | ||
| // `'init' in store` check for compatibility with nanostores <= 1.1.1 |
Member
There was a problem hiding this comment.
I think we can add ^1.2.0 to peer dependencies and avoid this check
Contributor
Author
There was a problem hiding this comment.
Sounds good. Would you like a PR to remove this check? I have the commit ready but you beat me to the version bump
Member
|
Released in 1.0.1. |
This was referenced Mar 15, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The initial value of a store is now returned by
useStoreon first mount / hydration instead of the store's current value, by providing theStore#initvalue to the third "getServerSnapshot" argument touseSyncExternalStore.This change avoids hydration errors on projects that use Server Side Rendering (SSR) combined with client-side navigation and rendering, where the client-side store value can get out of sync with the value in the server-rendered page especially if the server page is cached in any way (ISR).
This requires an upcoming release of nanostores including the new
Store#initattribute from PR:nanostores/nanostores#390
Fixes #38